﻿<div class="sample-list">
    <div class="sample-list-head-container  sample-header">
        <div style="width:700px; margin-left:200px; display: inline-block; text-align:center" class="sample-head-wrapper">
            <div class="sample-list-head">
                <a href="http://www.gcpowertools.com.cn/products/spreadjs/" target="_blank" class="sample-head-logo"></a>
                <div class="sample-head-text">{{pageResource.headerText}}</div>
            </div>
        </div>
        <div class="featurebutton">
            <ul class="buttonlist">
                <li><div class="wordsize"> <a class="whiteColor" href="http://www.gcpowertools.com.cn/products/download.aspx?pid=57&utm_source=Demo&utm_medium=spread&utm_term=controlexplorer&utm_content=download&utm_campaign=javascript"><i class="icon-c1download"></i><br>下载</a></div></li>
                <li><div class="wordsize"><a class="whiteColor" href="http://7fvgvc.com1.z0.glb.clouddn.com/Intro/SpreadJS.mp4?utm_source=Demo&utm_medium=spread&utm_term=controlexplorer&utm_content=video&utm_campaign=javascript"><i class="icon-film"></i><br>视频</a></div></li>
                <li class="wordsize"><div class="wordsize"><a class="whiteColor" href="http://www.gcpowertools.com.cn/products/spreadstudio/resources.htm?utm_source=Demo&utm_medium=spread&utm_term=controlexplorer&utm_content=document&utm_campaign=javascript#document"><i class="icon-book"></i><br>资源</a></div> </li>
                <li><div class="wordsize"><a class="whiteColor" href="http://gcdn.gcpowertools.com.cn/showforum-3.aspx?utm_source=Demo&utm_medium=spread&utm_term=controlexplorer&utm_content=forum&utm_campaign=javascript"><i class="icon-comments"></i><br>论坛</a></div></li>
                <li><div class="wordsize"><a class="whiteColor" href="http://www.gcpowertools.com.cn/order/price.htm?utm_source=Demo&utm_medium=spread&utm_term=controlexplorer&utm_content=purchase&utm_campaign=javascript"><i class="icon-shopping-cart"></i><br>购买</a></div></li>

            </ul>
        </div>
    </div>
    <div class="sample-list-supheader-container"><!--  -->
        <div class="sample-list-supheader-wrapper">
            <div class="sample-list-supheader">
                <div class="sample-list-title"><span class="header-span">{{pageResource.contentHeaderText}}</span></div>
                <div class="sample-list-search">
                    <!--<div class="sample-list-search-logo"></div>-->
                    <i class="icon-search"></i>
                    <input class="sample-list-search-input" ng-model="query" placeholder="{{pageResource.contentHeaderSearchPlaceholder}}"/>
                </div>
            </div>
        </div>
    </div>
    <div class="sample-intro">
        <p>{{pageResource.introductionText}}</p>
    </div>
    <div class="sample-list-content">
        <div class="sample-list-cotent-wrapper">
            <div ng-repeat="category in getCategorys(query)">
                <div class="sample-clear-pre"></div>
                <div class="sample-list-category-title">
                    <h2 class="sample-list-category-titleText">
                        <i class="icon-angle-right"></i>
                        <span>{{category.category.title}}</span>
                    </h2>
                </div>
                <div ng-repeat="feature in category.filterFeatureList" class="sample-list-featureList">
                    <div class="sample-list-featureList-head">
                        <div class="sample-list-featureList-headLogo">
                            <!--<img ng-src="{{feature.imageUrl}}" >-->
                            <i class="{{feature.icon}}"></i>
                        </div>
                        <div class="sample-list-featureList-headText" tool-tip title="{{feature.featureDescription}}">
                            {{feature.feature}}
                        </div>
                    </div>
                    <ul class="sample-list-featureList-item" >
                        <li ng-repeat="featureItem in feature.filterFeatureDetails" type="square" class="feature-list">
                            <a href="#/samples/{{featureItem.resource}}" class="feature-list-name">
                                {{featureItem.name}}
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="sample-clear-after"></div>
            </div>
        </div>
        <!-- new feature items
        <div class="sample-list-newFeatures sample-none-user-select">
            <div class="sample-list-newFeatures-head">{{pageResource.newFeauresHeaderText}}</div>
            <div class="sample-list-newFeatures-remain">
                <div class="sample-list-newFeatures-left">
                    <div class="sample-list-navigation-left" ng-click="preFeature()"></div>
                </div><div class="sample-list-newFeatures-content sample-list-showShadows">
                    <div class="sample-list-demo-content" animate-move>
                        <div class="sample-clear-pre"></div>
                        <div class="sample-list-demo-item" ng-repeat="newFeature in pageResource.newFeatures">
                            <div class="sample-list-demo-img">
                                <a href="#/samples/{{newFeature.resource}}">
                                    <img ng-src="{{newFeature.imageUrl}}">
                                </a>
                            </div>
                            <div class="sample-list-demo-name">
                                <a href="#/samples/{{newFeature.resource}}" class="sample-list-demo-nameLink">{{newFeature.name}}</a>
                            </div>
                        </div>
                        <div class="sample-clear-after"></div>
                    </div>
                </div><div class="sample-list-newFeatures-right">
                    <div class="sample-list-navigation-right" ng-click="nextFeature()"></div>
                </div>
            </div>
        </div>
        -->
    </div>
</div>
<div class="sample-footer">
    <div>
        <p>
            {{pageResource.footerText}}
        </p>
    </div>
</div>